<template>
<div>
    <Row :class="[border ? 'border' : '', 'fieldRow']">
        <Col v-for="(field, index) in fields" :key="field.key" :span="getFilterCol(field.col)" v-if="field.show" class-name="fieldCol">
        <div class="fieldWrap">
            <p class="label" :style="'width:' + computedWidth(field.labelWidth)  + 'px'">
                <Tooltip placement="top-start" transfer :offset="-15" v-if="field.tip">
                    <Icon type="md-help-circle" />
                    <div slot="content">
                        {{field.tip}}
                    </div>
                </Tooltip>
                {{field.title}}:
            </p>
            <p class="content">
                <slot v-if="field.slot" :name="field.slot" :row="formItem" :field="field" :index="index">
                    {{formItem[field.slot] | isNull}}
                </slot>
                <span v-if="field.key">
                    {{formItem[field.key] | isNull}}
                </span>
            </p>
        </div>
        </Col>
    </Row>
    <Spin size="large" fix v-if="spinShow"></Spin>
</div>
</template>

<script>
import {
    initField,
    typeOf
} from '@/utils/tool.js'

export default {
    props: {
        fields: Array,
        labelWidth: {
            type: Number,
            default: 81
        },
        border: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            formItem: {},
            edit: false,
            res: {},
            spinShow: false
        }
    },
    methods: {
        async loadData() {
            this.spinShow = true

            if (this.$attrs.loadDataApi) {

                let params = {}

                this.$emit('on-before-load', params)

                let res = await this.$attrs.loadDataApi(params)

                if (res.isSucceed) {
                    if (typeOf(res.rows) == "array") {
                        this.res = res.rows[0]
                    } else {
                        this.res = res.rows
                    }

                    Object.assign(this.formItem, this.res)

                    this.$emit('on-after-load', this.formItem)
                } else {
                    this.$Message.error(this.res.message);
                }
            }

            this.spinShow = false
        },
        computedWidth(width) {
            return width ? width : this.labelWidth
        },
        visibility(fieldKey, status) {
            let field = this.fields.find(field => field.key == fieldKey)
            if (field) {
                field.show = status
            }
        },
        getFilterCol(col){
            return col || 8
        }
    },
    created() {
        this.fields.map(field => {
            if (field.show == undefined) {
                this.$set(field, "show", true)
            }
        })
    },
    mounted() {
        this.loadData()
    },
}
</script>

<style lang="less" scoped>
/deep/ .ivu-form-item-label {
    position: relative;
    z-index: 1;
}

.fieldRow {
    margin-bottom: -1px;

    .fieldCol {

        .fieldWrap {
            display: -webkit-box;
            align-items: center;

            .label {
                text-align: right;
                color: #999;
                padding: 0px 5px 0px 10px;
                height: 40px;
                line-height: 40px;
            }

            .content {
                flex: 1;
                padding: 0px 10px 0px 5px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

    }
}

.fieldRow.border {
    margin: -1px;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;

    .fieldCol {

        .fieldWrap {
            border-top: 1px solid #eee;

            .label {
                background-color: #f7f7f7;
                border-left: 1px solid #eee;
                border-right: 1px solid #eee;
            }
        }

    }

}
</style>
